<!--
 * @Author       : GaoFeiXiang
 * @Date         : 2023-06-22 18:50:42
 * @Description  : 预排订单地区层级
 * @FilePath     : /aps-admin/src/views/pre-order/index.vue
-->
<template>
  <div class="pre-order">
    <el-card>
      <el-row>
        <el-col :span="20">
          <el-form class="searchForm" :model="searchForm" inline size="mini">
            <el-form-item label="">
              <el-select v-model="searchForm.status" placeholder="请选择">
                <el-option label="" value=""></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="">
              <el-select v-model="searchForm.status" placeholder="请选择">
                <el-option label="" value=""></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="">
              <el-select v-model="searchForm.status" placeholder="请选择">
                <el-option label="" value=""></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="">
              <el-select v-model="searchForm.status" placeholder="请选择">
                <el-option label="" value=""></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="">
              <el-input
                v-model="searchForm.orderNum"
                placeholder="订单号"
              ></el-input>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="4">
          <span class="expand">{{ expand ? "收起" : "展开" }}</span>
          <i class="expand el-icon-arrow-down" v-if="!expand" />
          <i class="expand el-icon-arrow-up" v-else />
          <el-button type="primary" size="mini">查询</el-button>
          <el-button type="" size="mini">重置</el-button>
        </el-col>
      </el-row>
    </el-card>
    <el-row class="select-rows">
      <el-col :span="24">
        <span class="select">已选1项</span>
        <el-button type="primary" plain size="small">
          <img class="icons" src="@/assets/imgs/export.png" alt="" />
          导出报表
        </el-button>
      </el-col>
    </el-row>
    <el-card>
      <second-table-list
        :total="total"
        :pageSize="page.pageSize"
        :current="page.page"
        @changePage="changePage"
      >
        <my-table
          slot="table"
          :columns="columns"
          :data="tdata"
          :showSelection="true"
          @selectChange="selectChange"
          :showColumnSetting="true"
        >
          <template slot="table-title">
            <div class="table-title">
              <h1>预排订单列表</h1>
              <div class="right">
                <span>固定表头</span>
                <el-switch v-model="header"> </el-switch>
                <span>固定表尾</span>
                <el-switch v-model="tableTail"> </el-switch>
              </div>
            </div>
          </template>
        </my-table>
      </second-table-list>
    </el-card>
    <add-form v-model="show"></add-form>
  </div>
</template>

<script>
import columnSetting from "../../components/table/columnSetting.vue";
import myTable from "../../components/table/myTable.vue";
import secondTableList from "@/components/table/secondTableList";
import addForm from "./addForm.vue";
export default {
  components: { columnSetting, myTable, secondTableList, addForm },
  data() {
    return {
      searchForm: {},
      expand: false,
      header: false,
      tableTail: true,
      total: 0,
      page: {
        page: 1,
        pageSize: 10,
      },
      columns: [
        {
          label: "预排订单号",
          prop: "num",
          fixed: true,
        },
        {
          label: "客户名称",
          prop: "name",
        },
        {
          label: "管理人员",
          prop: "unit",
        },
        {
          label: "排产地区",
          prop: "clerk",
        },
        {
          label: "产品大类",
          prop: "product",
        },
        {
          label: "产品二级分类",
          prop: "secondaryClassification",
        },
        {
          label: "产品名称",
          prop: "productName",
        },
        {
          label: "分单数量/件",
          prop: "customerDemand",
        },
        {
          label: "批次序号",
          prop: "customerDemand",
        },
        {
          label: "批次排产量/件",
          prop: "customerDemand",
        },

        {
          label: "批次最早上线时间",
          prop: "customerDemand",
        },
        {
          label: "批次交期",
          prop: "customerDemand",
        },
        {
          label: "整单交期",
          prop: "customerDemand",
        },
        {
          label: "订单周期内标准品产能池/件",
          prop: "customerDemand",
        },
        {
          label: "虚拟订单周期内总产能占用",
          prop: "customerDemand",
        },
        {
          label: "ERP订单冲销量/件",
          prop: "customerDemand",
        },
        {
          label: "ERP订单冲销量产能占用",
          prop: "customerDemand",
        },
        {
          label: "剩余产能/件",
          prop: "output",
        },
        {
          label: "排产状态",
          prop: "status",
        },
        {
          label: "操作",
          prop: "action",
          fixed: "right",
        },
      ],
      tdata: [],
      selectChangeList: [],
      show: false,
    };
  },
  created() {},
  mounted() {},
  methods: {
    changePage(val) {
      this.page = val;
    },
    selectChange(val) {
      console.log(val);
      this.selectChangeList = val;
    },
    columnChange(val) {
      this.columnsSetting = val;
    },
  },
};
</script>

<style scoped lang="scss">
.pre-order {
  width: 100%;
  .searchForm {
    .el-form-item {
      margin-bottom: unset;
    }
  }
  .expand {
    margin-right: 10px;
    color: #8fa1c9;
  }
  .select-rows {
    margin: 20px 0;
    .select {
      margin-right: 15px;
    }
  }
}
.table-title {
  display: flex;
  flex: 1;
  justify-content: space-between;
  align-items: center;
  h1 {
    font-size: 20px;
  }
  .right {
    span {
      font-size: 14px;
      color: #8fa1c9;
      margin-right: 10px;
    }
    .el-switch {
      margin-right: 20px;
    }
  }
}
.icons {
  vertical-align: middle;
}
</style>
